package pages

import (
	"github.com/templui/templui/internal/components"
	"github.com/templui/templui/internal/components/tabs"
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Icon() {
	@layouts.DocsLayout(
		"Icon",
		"A wrapper for Lucide Icons with optional settings for size, color, fill, stroke, and custom classes.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				Text: "Examples",
				ID:   "examples",
				Children: []modules.TableOfContentsItem{
					{
						Text: "Colored",
						ID:   "colored",
					},
					{
						Text: "Filled",
						ID:   "filled",
					},
					{
						Text: "Sizes",
						ID:   "sizes",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "icon",
						Text: "Icon",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Icon",
			Description: templ.Raw(`A wrapper for <a href="https://lucide.dev" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity">Lucide Icons</a> with optional settings for size, color, fill, stroke, and custom classes. Browse available icons in the Lucide library to see what you can use.`),
			Tailwind:    true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Icon",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.IconDefault(),
				PreviewCodeFile: "icon_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@tabs.Tabs(tabs.Props{
					// ID: "install-" + props.ComponentName,
				}) {
					@tabs.List(tabs.ListProps{
						Class: "w-1/2",
					}) {
						@tabs.Trigger(tabs.TriggerProps{
							Value:    "cli",
							IsActive: true,
						}) {
							CLI
						}
						@tabs.Trigger(tabs.TriggerProps{
							Value: "manual",
						}) {
							Manual
						}
					}
					<div class="w-full mt-2">
						@tabs.Content(tabs.ContentProps{
							Value:    "cli",
							IsActive: true,
						}) {
							@modules.Code(modules.CodeProps{
								ShowCopyButton: true,
								CodeContent:    "templui add icon",
							})
						}
						@tabs.Content(tabs.ContentProps{
							Value: "manual",
						}) {
							<div class="border rounded-md p-4">
								<ol class="list-decimal pl-5 space-y-8">
									<li>
										<p class="mb-4 font-semibold">Copy and paste the following code into your project: (icon.go)</p>
										@modules.CodeSnippetFromEmbedded("icon/icon.go", "go", components.TemplFiles)
									</li>
									<li>
										<p class="mb-4 font-semibold">Copy and paste the following code into your project: (icon_defs.go)</p>
										@modules.CodeSnippetFromEmbedded("icon/icon_defs.go", "go", components.TemplFiles)
									</li>
									<li>
										<p class="mb-4 font-semibold">Copy and paste the following code into your project: (icon_data.go)</p>
										@modules.CodeSnippetFromEmbedded("icon/icon_data.go", "go", components.TemplFiles)
									</li>
									<li>
										<p class="mb-4 font-semibold">Update the import paths to match your project setup.</p>
									</li>
								</ol>
							</div>
						}
					</div>
				}
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Colored",
					ShowcaseFile:    showcase.IconColored(),
					PreviewCodeFile: "icon_colored.templ",
					ID:              "colored",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Filled",
					ShowcaseFile:    showcase.IconFilled(),
					PreviewCodeFile: "icon_filled.templ",
					ID:              "filled",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Sizes",
					ShowcaseFile:    showcase.IconSizes(),
					PreviewCodeFile: "icon_sizes.templ",
					ID:              "sizes",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="icon" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Icon",
						Description: "Wrapper component for Lucide Icons with customizable size, color, fill, and stroke properties.",
						Items: []modules.APITableItem{
							{
								Name:        "Name",
								Type:        "IconName",
								Default:     "",
								Description: "The name of the Lucide icon to display (e.g., 'heart', 'user', 'star').",
								Required:    true,
							},
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the icon element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the icon.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the icon element.",
								Required:    false,
							},
							{
								Name:        "Size",
								Type:        "int",
								Default:     "24",
								Description: "Size of the icon in pixels.",
								Required:    false,
							},
							{
								Name:        "Color",
								Type:        "string",
								Default:     "currentColor",
								Description: "Color of the icon (CSS color value).",
								Required:    false,
							},
							{
								Name:        "Fill",
								Type:        "string",
								Default:     "none",
								Description: "Fill color of the icon (CSS color value or 'none').",
								Required:    false,
							},
							{
								Name:        "StrokeWidth",
								Type:        "float64",
								Default:     "2",
								Description: "Width of the icon's stroke.",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}
